<div class="cell cell-checkbox">
  <mat-checkbox
    color="primary"
    [ixTest]="app().name"
    [checked]="selected()"
    (click)="$event.stopPropagation()"
    (change)="toggleAppChecked()"
  ></mat-checkbox>
</div>
<div class="cell cell-name">
  <div class="name">
    <div class="app-logo">
      <img [src]="app().metadata.icon" [src-fallback]="imagePlaceholder" />
    </div>

    <div class="app-name">{{ app().name }}</div>
  </div>
</div>
<div class="cell cell-status">
  <ix-app-state-cell
    [app]="app()"
    [job]="job()"
    (click)="statusPressed(); $event.stopPropagation()"
  ></ix-app-state-cell>
</div>
<div class="cell cell-cpu" [matTooltip]="'Percentage of total core utilization' | translate">
  @if (hasStats()) {
    <span>{{ stats().cpu_usage.toFixed(0) }}%</span>
  } @else {
    {{ 'N/A' | translate }}
  }
</div>
<div class="cell cell-ram" [matTooltip]="'Memory usage of app' | translate">
  @if (hasStats()) {
    <span>{{ stats().memory | ixFileSize }}</span>
  } @else {
    {{ 'N/A' | translate }}
  }
</div>
<div class="cell cell-io" [matTooltip]="'Block I/O read and writes' | translate">
  @if (hasStats()) {
    <span>
      {{ stats().blkio.read | ixFileSize }} - {{ stats().blkio.write | ixFileSize }}
    </span>
  } @else {
    {{ 'N/A' | translate }}
  }
</div>
<div class="cell cell-network" [matTooltip]="'Incoming / Outgoing network traffic' | translate">
  @if (hasStats() && stats()?.networks?.length) {
    <span>
      {{ incomingTraffic() | ixNetworkSpeed }}
      -
      {{ outgoingTraffic() | ixNetworkSpeed }}
    </span>
  } @else {
    {{ 'N/A' | translate }}
  }
</div>
<div class="cell cell-update">
  <ix-app-update-cell [app]="app()" [showIcon]="true"></ix-app-update-cell>
</div>
<div class="cell cell-action">
  @if (isAppStopped()) {
    <button
      *ixRequiresRoles="requiredRoles"
      mat-icon-button
      matTooltipPosition="above"
      [ixTest]="[app().name, 'start']"
      [matTooltip]="'Start' | translate"
      [disabled]="inProgress()"
      (click)="start(); $event.stopPropagation()"
    >
      <ix-icon name="mdi-play-circle"></ix-icon>
    </button>
  } @else {
    <button
      *ixRequiresRoles="requiredRoles"
      mat-icon-button
      matTooltipPosition="above"
      [ixTest]="[app().name, 'restart']"
      [attr.aria-label]="'Restart App' | translate"
      [matTooltip]="'Restart App' | translate"
      (click)="restart(); $event.stopPropagation()"
    >
      <ix-icon name="mdi-restart"></ix-icon>
    </button>

    <button
      *ixRequiresRoles="requiredRoles"
      mat-icon-button
      matTooltipPosition="above"
      [ixTest]="[app().name, 'stop']"
      [matTooltip]="'Stop' | translate"
      (click)="stop(); $event.stopPropagation()"
    >
      <ix-icon name="mdi-stop-circle"></ix-icon>
    </button>
  }
</div>

<div class="cell-clickable">
  <ix-icon name="mdi-chevron-right"></ix-icon>
</div>
